<template>
<div style="width: 1200px;margin: 0 auto">
  <el-row :gutter="10">
   <el-col :span="18">
     <el-card>
       <h1 style="color: orange;text-align: center">{{content.title}}</h1>
       <p style="color: #666;text-align: center;font-size: 12px">
         作者:{{ content.nickname }} | 发布时间:{{content.createTime}} | 阅读次数: {{ content.viewCount }}
       </p>
       <hr>
       <div v-if="content.type!=2">
         <el-card>
           <span style="color: #0aa1ed;font-weight: bold">摘要:</span>
           {{content.brief}}
         </el-card>
         <p v-html="content.content"></p>
       </div>
       <video v-else :src="'http://localhost:8080'+content.videoUrl"
              controls type="video/mp4" style="width: 100%"></video>
     </el-card>
     <el-card style="margin-top: 10px">
       <p>发一条友善的评论</p>
       <hr>
       <el-row :gutter="10">
        <el-col :span="22"><el-input v-model="comment.content" placeholder="说点儿啥..."></el-input></el-col>
        <el-col :span="2"><el-button @click="post()">发布</el-button></el-col>
       </el-row>
<!--     评论列表  -->
       <el-row :gutter="10" v-for="item in commentArr">
        <el-col :span="2"><el-avatar style="margin: 10px"
              :src="'http://localhost:8080'+item.userImgUrl"></el-avatar></el-col>
        <el-col :span="22">
          <p style="color: orange;font-weight: bold;margin: 5px 0">{{item.nickname}}</p>
          <p style="margin: 0">{{item.content}}</p>
          <p style="color: #666;font-size: 12px;margin: 0">{{item.createTime}}</p>
        </el-col>
       </el-row>
     </el-card>
   </el-col>
   <el-col :span="6">
    <el-card>
      <div id="head_div"></div>
      <div style="text-align: center;position: relative;bottom: 45px">
        <el-avatar :src="'http://localhost:8080'+content.userImgUrl" :size="90"
                   style="border: 5px solid white"></el-avatar>
        <p style="font-size: 20px;font-weight: bold;margin: 0">{{content.nickname}}</p>
        <el-icon><Edit/></el-icon>本文作者<br>
        <el-icon><Clock/></el-icon>{{content.createTime}}
      </div>
    </el-card>
     <el-card style="margin-top: 10px">
       <h2>作者其它文章</h2>
       <hr>
       <el-row :gutter="10" v-for="item in otherArr">
        <el-col :span="10">
          <router-link :to="'/detail?id='+item.id">
            <img :src="'http://localhost:8080'+item.imgUrl" style="width: 100%">
          </router-link>
        </el-col>
        <el-col :span="14">
          <router-link :to="'/detail?id='+item.id">
            <p style="height: 40px;margin-top: 0">{{item.title}}</p>
          </router-link>
          <p style="font-size: 12px;color: #666;margin: 0">{{item.createTime}}</p>
        </el-col>
       </el-row>
     </el-card>
     <el-card style="margin-top: 10px">
       <h2>热门文章</h2>
       <hr>
       <el-row :gutter="10" v-for="item in hotArr">
         <el-col :span="10"><img :src="'http://localhost:8080'+item.imgUrl" style="width: 100%"></el-col>
         <el-col :span="14">
           <p style="height: 40px;margin-top: 0">{{item.title}}</p>
           <p style="font-size: 12px;color: #666;margin: 0">{{item.createTime}}</p>
         </el-col>
       </el-row>
     </el-card>
   </el-col>
  </el-row>
</div>
</template>

<script setup>
import {onBeforeUpdate, onMounted, ref} from "vue";
  import axios from "axios";
import router from "@/router";
import qs from "qs";
import {ElMessage} from "element-plus";
  const comment = ref({content:''});
  const post = ()=>{
    //得到登录的用户id
    let user = localStorage.user?JSON.parse(localStorage.user):null;
    if (user==null){
      alert("请先登录!");
      router.push('/login');
      return;
    }
    comment.value.userId = user.id;  //作者id
    comment.value.contentId = content.value.id; //评论文章id
    let data = qs.stringify(comment.value);
    axios.post('http://localhost:8080/v1/comments/add-new',data)
    .then((response)=>{
      if (response.data.code==2001){
        ElMessage.success("评论完成!");
        loadComments();
      }
    })
  }
  const content = ref({});
  const otherArr = ref([]);
  const hotArr = ref([]);
  const commentArr = ref([]);
  const  loadComments = ()=>{
    //得到地址栏中的id
    let id = new URLSearchParams(location.search).get('id');
    axios.get('http://localhost:8080/v1/comments/'+id)
    .then((response)=>{
      if (response.data.code==2001){
        commentArr.value = response.data.data;
      }
    })
  }
  const initData = ()=>{
    loadComments();
    //得到地址栏中的id
    let id = new URLSearchParams(location.search).get('id');
    //通过id查询内容详情
    axios.get('http://localhost:8080/v1/contents/'+id+'/detail')
        .then((response)=>{
          if (response.data.code==2001){
            content.value = response.data.data;
            //通过作者id查询作者其它文章
            axios.get('http://localhost:8080/v1/contents/'+content.value.userId+'/other')
                .then((response)=>{
                  if (response.data.code==2001){
                    otherArr.value = response.data.data;
                  }
                })

          }
        })

    //请求热门文章列表
    axios.get('http://localhost:8080/v1/contents/hot')
        .then((response)=>{
          if (response.data.code==2001){
            hotArr.value = response.data.data;
          }
        })
  }
  //从B到B执行   从A到B不执行
  onBeforeUpdate(()=>{
   initData();
  })
  //从A页面->B页面时 B页面的onMounted方法执行  从B到B不执行
  onMounted(()=>{
    initData();
  })
</script>

<style scoped>
  #head_div{
    height: 90px;
    background-image: url("/public/imgs/avarbg.jpg");
  }
</style>